<script setup lang="ts">
import { ref, watch } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useCinemaStore } from '@/store/params'
import { useUserStore } from '@/store/user'

const cinemaStore = useCinemaStore()
const userStore = useUserStore()
// 定义响应式的导航栏标题
const navTitle = ref('我的')
const imgUrl = ref('/static/movie_bg.png')

const onClick = (type) => {
  if (type === 'order') {
    uni.navigateTo({
      url: '/pages-mine/orderList'
    })
  } else if (type === 'card') {
    uni.navigateTo({
      url: '/pages-mine/vipList'
    })
  } else if (type === 'coupon') {
    uni.navigateTo({
      url: '/pages-mine/couponList'
    })
  }
}

const navBack = () => {
  uni.navigateTo({
    url: '/pages/movieList'
  })
}
</script>

<template>
<PageLayout :navbarShow="true" navLeftText="" @navBack="navBack" :navLeftArrow="true" :navTitle="navTitle">
  <view>
    <view class="flex items-center green-bg p-4">
      <view class="flex items-center justify-center" >
        <wd-img :width="60" :height="60" :src="imgUrl" />
      </view>
      <view class="ml-2">
      {{userStore.userInfo.memberCode}}
      </view>
    </view>
    <view class="flex justify-center gap-10 my-6 p-2">
      <view @click="onClick('order')" class="text-group p-2">订单</view>
      <view @click="onClick('card')" class="text-group p-2">会员卡</view>
      <view @click="onClick('coupon')" class="text-group p-2">优惠券</view>
    </view>
    <view class="px-2">
      <view class="flex justify-between items-center my-2 p-2 mb-6 border-b rounded grey-bg" >
        <view class="flex items-center">
          <wd-icon name="lock-on" />
          <view class="ml-2">隐私政策</view>
        </view>
        <wd-icon color="var(--wot-color-theme)" name="arrow-right" />
      </view>
      <view class="flex justify-between items-center my-2 p-2 mb-6 border-b rounded grey-bg" >
        <view class="flex items-center">
          <wd-icon name="user" />
          <view class="ml-2">用户协议</view>
        </view>
        <wd-icon color="var(--wot-color-theme)" name="arrow-right" />
      </view>
      <view class="flex justify-between items-center my-2 p-2 mb-6 border-b rounded grey-bg" >
        <view class="flex items-center">
          <wd-icon name="list" />
          <view class="ml-2">联系影院</view>
        </view>
        <wd-icon color="var(--wot-color-theme)" name="arrow-right" />
      </view>
    </view>
  </view>
</PageLayout>
</template>

<style>
.grey-bg {
  background-color: rgba(108,108,108,0.1);
}
.green-bg {
  background-color: rgba(129,179,55,1);
}
.text-group {
  display: block;
  border-radius: 8px;
  background-color: #FFBF6B;
  width: 160px;
  text-align: center;
}

</style>

<route type="page" lang="json5">
{
  "style": {
    navigationStyle: 'custom',
    navigationBarTitleText: '',
  }
}
</route>
